import React from 'react'
import { ProTable } from '@ant-design/pro-components'
import type { ProColumns } from '@ant-design/pro-components'
import { api_articleList } from '@/api/utls'
import type { ArticleListItem } from '@/api/utls'
import { Button, Popconfirm } from 'antd'
import { useNavigate } from 'react-router-dom'

export default function Article() {
  const navigate = useNavigate()
  const params = {
    // name: '',
    // time: '',
  }
  const columns: ProColumns<ArticleListItem>[] = [
    {
      title: '文章名',
      dataIndex: 'name',
    },
    {
      title: '创建时间',
      dataIndex: 'time',
    },
    {
      title: '操作',
      hideInSearch: true,
      render: (_: any, row) => (
        <>
          <Button
            type="text"
            onClick={() => {
              edit(row.id)
            }}
          >
            编辑
          </Button>
          <Popconfirm
            title="确认删除该条文章吗?"
            onConfirm={() => del(row.id)}
            okText="确认"
            cancelText="取消"
          >
            <Button type="text">删除</Button>
          </Popconfirm>
        </>
      ),
    },
  ]
  const edit = (id: number) => {}
  const del = (id: number) => {}
  return (
    <>
      <ProTable
        rowKey="id"
        headerTitle="ProTable"
        toolBarRender={() => [
          <Button
            onClick={() => {
              navigate('/article/add')
            }}
          >
            新建
          </Button>,
        ]}
        columns={columns}
        params={params}
        pagination={{ pageSize: 10 }}
        request={async (parmas) => {
          console.log(parmas)
          const { data } = await api_articleList(parmas)
          return {
            data: data.data.data,
            success: true,
            total: data.data.total,
          }
        }}
      ></ProTable>
    </>
  )
}
